<template>
  <div class="dialog-wrapper">
    <el-dialog
      :visible.sync="chooseVisible"
      title="选择SKU"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <el-card shadow="never" class="aui-card--fill managementWrapper">
        <div class="mod-sys__user">
          <el-table
            :data="skuList"
            @selection-change="handleSelectionChange"
            style="width: 100%"
            border
          >
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column
              prop="sku_name"
              label="规格"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="sale_price"
              label="零售价（元）"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="min_stock"
              label="库存"
              header-align="center"
              align="center"
            >
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <template slot="footer">
        <el-button @click="handleCancel">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="handleCheck">{{
          $t('confirm')
        }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    skuList: {
      type: Array,
    },
  },
  data() {
    return {
      chooseVisible: true,
      chooseInfo: [],
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.chooseInfo = val
    },
    handleCheck() {
      if (this.chooseInfo.length < 1) {
        this.$message.warning('请选择SKU')
        return
      }
      this.chooseInfo.forEach((item) => {
        item.product_sku_id = item.id
      })
      this.$emit('handleConfirm', this.chooseInfo)
      this.$emit('handleClose')
    },
    handleCancel() {
      this.$emit('handleClose')
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  ::v-deep .el-dialog {
    width: 40% !important;
  }
  .managementWrapper {
    .prodBox {
      padding-left: 6px;
      .imgBox {
        width: 64px;
        height: 64px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rightBox {
        margin-left: 14px;
        text-align: left;
        .top {
          max-width: 200px;
          margin-bottom: 6px;
        }
        .bottom {
          color: $mainColor;
        }
      }
    }
  }
}
</style>

<style lang="scss">
::v-deep .el-dialog__footer {
  border-top: 1px solid #f4f4f4 !important;
  padding: 16px 20px 16px !important;
}
</style>
